extends /layouts/_default

block vars
  -
    page = {
      title: 'Home'
    }

block default

  //- Slider
  section.uk-position-relative.uk-visible-toggle.uk-light(uk-slideshow="min-height: 300; max-height: 600;")
    ul.uk-slideshow-items
      each item in promo
        li(style="background-color: " + item.background)
          a(href="#")
            figure.uk-container.uk-height-1-1
              img(src= item.image
                  alt= item.title
                  width="1200"
                  height="600"
                  uk-cover)

    a.uk-position-center-left.uk-position-small.uk-hidden-hover(
      href="#"
      uk-slideshow-item="previous"
      uk-slidenav-previous)
    a.uk-position-center-right.uk-position-small.uk-hidden-hover(
      href="#"
      uk-slideshow-item="next"
      uk-slidenav-next)

    div.uk-position-bottom-center.uk-position-small
      ul.uk-slideshow-nav.uk-dotnav

  //- Categories
  section.uk-section.uk-section-default.uk-section-small
    div.uk-container
      div(class="uk-grid-small " +
                "uk-child-width-1-2 " +
                "uk-child-width-1-3@s " +
                "uk-child-width-1-6@m"
          uk-grid)
        each category in categories
          div
            a(class="uk-link-muted " +
                    "uk-text-center " +
                    "uk-display-block " +
                    "uk-padding-small " +
                    "uk-box-shadow-hover-large"
              href= category.href)
              if category.image
                div.tm-ratio.tm-ratio-4-3
                  div.tm-media-box
                    figure.tm-media-box-wrap
                      img.item-brand(src= category.image alt= category.title)
              div.uk-margin-small-top
                div.uk-text-truncate= category.title
                if category.comment
                  div.uk-text-meta.uk-text-xsmall.uk-text-truncate= category.comment

      div.uk-margin.uk-text-center
        +link-to-all("see all categories", "catalog.html")

  //- Trending
  section.uk-section.uk-section-small
    div.uk-container

      h2.uk-text-center Trending Items

      div.uk-card.uk-card-default.tm-ignore-container
        div(class="uk-grid-collapse " +
                  "uk-child-width-1-3 " +
                  "uk-child-width-1-4@m " +
                  "tm-products-grid"
            uk-grid)
          - var count = 0
          each product in products
            if count < 8
              +product(product)
            - count++;

      div.uk-margin.uk-text-center
        +link-to-all("shop all", "subcategory.html")

  //- Brands
  section.uk-section.uk-section-default.uk-section-small
    div.uk-container

      h2.uk-text-center Popular Brands

      div.uk-margin-medium-top(uk-slider="finite: true")
        div.uk-position-relative
          div.uk-grid-small.uk-flex-middle(uk-grid)

            div(class="uk-visible@m")
              a(href="#"
                uk-slidenav-previous
                uk-slider-item="previous")

            div.uk-width-expand.uk-slider-container
              ul(class="uk-slider-items " +
                       "uk-child-width-1-3 " +
                       "uk-child-width-1-6@s " +
                       "uk-grid " +
                       "uk-grid-large")
                each brand in brands
                  li
                    div.tm-ratio.tm-ratio-16-9
                      a.uk-link-muted.tm-media-box.tm-grayscale(
                        href="#"
                        title= brand.name)
                        figure.tm-media-box-wrap
                          img(src= brand.image alt= brand.name)

            div(class="uk-visible@m")
              a(href="#"
                uk-slider-item="next"
                uk-slidenav-next)

        ul(class="uk-slider-nav " +
                 "uk-dotnav " +
                 "uk-flex-center " +
                 "uk-margin-medium-top " +
                 "uk-hidden@m")

      div.uk-margin.uk-text-center
        +link-to-all("see all brands", "brands.html")

  //- Blog
  section.uk-section.uk-section-small
    div.uk-container

      h2.uk-text-center Blog

      div(class="uk-grid-medium " +
                "uk-grid-match " +
                "uk-child-width-1-1 " +
                "uk-child-width-1-2@s"
          uk-grid)

        each article in articles
          div
            +article(article)

      div.uk-margin.uk-text-center
        +link-to-all("see all articles", "blog.html")

  //- About & News
  section.uk-section.uk-section-default.uk-section-small
    div.uk-container
      div(class="uk-grid-medium " +
                "uk-child-width-1-1 " +
                "uk-child-width-1-2@s"
          uk-grid)

        //- About
        section

          h2(class="uk-text-center uk-text-left@s") About

          p Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc at neque vulputate, vestibulum magna in, accumsan urna. Nulla feugiat ipsum ex, molestie porttitor nibh faucibus at. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam hendrerit lorem ut finibus semper. Donec ac vehicula erat, nec consequat massa.
          p Quisque rhoncus fermentum sapien id congue. Nam at rutrum turpis. Aliquam sagittis imperdiet tortor vel dignissim. Ut ipsum nunc, egestas et odio id, vestibulum posuere orci. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
          div(class="uk-text-center uk-text-left@s")
            +link-to-all("read more", "about.html")

        //- News
        section

          h2(class="uk-text-center uk-text-left@s") Latest News

          ul.uk-list.uk-list-small.uk-list-divider
            each article in news
              li
                article.uk-article
                  div.uk-article-body
                    //- Date
                    div.uk-article-meta.uk-margin-xsmall-bottom
                      time= article.date
                    //- Title
                    h3.uk-h4.uk-margin-remove
                      a.uk-link-heading(href= article.href)= article.title
                    //- Description
                    if article.description
                      div.uk-margin-xsmall-top.uk-text-small!= article.description

          div(class="uk-margin uk-text-center uk-text-left@s")
            +link-to-all("see all news", "news.html")

  //- Subscribe
  section.uk-section.uk-section-primary.uk-section-small.uk-light
    div.uk-container

        div.uk-text-center
          div.uk-h2.uk-margin-remove Subscribe for updates
          div Be aware of new products and special offers.

        div.uk-margin
          form
            div.uk-grid-small.uk-flex-center(uk-grid)
              div(class="uk-width-1-1 uk-width-medium@s")
                div.uk-inline.uk-width-1-1
                  span.uk-form-icon(uk-icon="mail")
                  input.uk-input(type="email" placeholder="Your email" required)
              div
                button.uk-button.uk-button-primary subscribe